import { useBrowserInfo, useClipboard, useNetwork, useBattery } from 'browser-use';

// 浏览器信息展示
const browserInfo = useBrowserInfo();
const browserInfoElement = document.getElementById('browser-info');
browserInfoElement.innerHTML = `
  <p>浏览器: ${browserInfo.browser.name} ${browserInfo.browser.version}</p>
  <p>操作系统: ${browserInfo.os.name} ${browserInfo.os.version}</p>
  <p>设备类型: ${browserInfo.device.type || '未知'}</p>
`;

// 剪贴板操作
const clipboard = useClipboard();
const copyBtn = document.getElementById('copy-btn');
const pasteBtn = document.getElementById('paste-btn');
const clipboardOutput = document.getElementById('clipboard-output');

copyBtn.addEventListener('click', async () => {
  const text = '这是一段测试文本，由 Browser-use 复制到剪贴板';
  await clipboard.writeText(text);
  clipboardOutput.textContent = '文本已复制到剪贴板！';
});

pasteBtn.addEventListener('click', async () => {
  try {
    const text = await clipboard.readText();
    clipboardOutput.textContent = `从剪贴板读取的内容: ${text}`;
  } catch (error) {
    clipboardOutput.textContent = '无法读取剪贴板内容';
  }
});

// 网络状态监控
const network = useNetwork();
const networkStatus = document.getElementById('network-status');

function updateNetworkStatus() {
  networkStatus.innerHTML = `
    <p>网络状态: ${network.online ? '在线' : '离线'}</p>
    <p>连接类型: ${network.effectiveType || '未知'}</p>
    <p>下行速度: ${network.downlink || '未知'} Mbps</p>
  `;
}

updateNetworkStatus();
network.onChange(updateNetworkStatus);

// 电池状态
const battery = useBattery();
const batteryStatus = document.getElementById('battery-status');

function updateBatteryStatus() {
  if (battery.isSupported) {
    batteryStatus.innerHTML = `
      <p>电量: ${(battery.level * 100).toFixed(1)}%</p>
      <p>充电状态: ${battery.charging ? '正在充电' : '未充电'}</p>
      <p>预计充电时间: ${battery.chargingTime === Infinity ? '未知' : battery.chargingTime + '秒'}</p>
      <p>预计剩余使用时间: ${battery.dischargingTime === Infinity ? '未知' : battery.dischargingTime + '秒'}</p>
    `;
  } else {
    batteryStatus.textContent = '当前浏览器不支持电池状态 API';
  }
}

updateBatteryStatus();
battery.onChange(updateBatteryStatus);